<template>
	<view class="container">
		<view class="datecard">			
			<view class="card">
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
					class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
					
				</picker-view>
			</view>
			<view class="btn">
				<button @click="quxiao">取消</button>
				<button @click="ok">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			const hours = []
			const hour = date.getHours()
			const minutes = []
			const minute = date.getMinutes()
			for (let i = 1953; i <= date.getFullYear()-17; i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			for (let i = 1; i <= 24; i++) {
				hours.push(i)
			}
			for (let i = 1; i <= 60; i++) {
				minutes.push(i)
			}
			return {
				title: 'picker-view',
				years,
				year,
				months,
				month,
				days,
				day,
				hours,
				hour,
				minutes,
				minute,
				value: [9999, month - 1, day - 1, hour - 1, minute - 1],
				visible: true,
				indicatorStyle: `height: 100upx;`
			}
		},
		methods: {
			ok(){
					this.$emit('jieguo',this.year+'-'+this.month+'-'+this.day);
			},
			quxiao(){
					this.$emit('quxiao');
			},
			
			
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				this.hour = this.hours[val[3]]
				this.minute = this.minutes[val[4]]
				//console.log(this.year, this.month, this.day, this.hour, this.minute)

			}

		},

	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.container {
		height:700rpx;
	}

	.datecard {
		width: 100%;
		height: 700rpx;
		background-color: #FFFFFF;
		opacity: 1;
		border-radius: 20upx 20upx 0upx 0upx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.datecard>.head {
		width: 690upx;
		height: 80upx;
		margin: 0 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.head>text {
		width: 400upx;
		height: 48upx;
		font-size: 34upx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 48upx;
		color: #333333;
		opacity: 1;
	}

	.head>image {
		width: 48upx;
		height: 48upx;
	}

	.datecard>.card {
		width: 750upx;
		height: 505upx;
	}

	.card>.picker-view {
		width: 630upx;
		height: 505upx;
		font-size: 28upx;
		margin: 0 60upx;
		text-align: center;
	}

	.picker-view /deep/ .item {
		line-height: 88upx;
	}

	.datecard>.btn {
		width: 750upx;
		height: 120upx;
		line-height: 120upx;
		display: flex;
		justify-content: space-around;
		margin-top: 20upx;
		border-top: 1upx solid #e5e5e5;
	}

	.btn>button:nth-child(1) {
		width: 330upx;
		height: 70upx;
		line-height: 70upx;
		border-radius: 8upx;
		border: 1upx solid #2DB88A;
		font-size: 28upx;
		color: #2DB88A;
		margin-top: 20upx;
	}

	.btn>button:nth-child(2) {
		width: 330upx;
		height: 70upx;
		line-height: 70upx;
		border-radius: 8upx;
		background-color: #2DB88A;
		font-size: 28upx;
		color: #ffffff;
		margin-top: 20upx;
	}
</style>